<template>
  <div class="app-container">
    <el-button type="danger" plain @click="deleteByIds">移除</el-button>
    <el-button type="primary" plain @click="ordersConfirm">生成订单</el-button>
    <!-- 表格 -->
    <el-table :data="list" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="菜品名称" width="180" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.dishName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="img" label="菜品图片" width="180" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.dishPicture" style="width: 100px;height: 100px">
        </template>
      </el-table-column>
      <el-table-column label="菜品价格" width="180" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.dishPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所需时间" width="180" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.dishTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <button @click="subDishNumber(scope.row.id)">-</button>
          {{ scope.row.copies }}
          <button @click="addToCart(scope.row.id)">+</button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="订单确认" :visible.sync="dialogVisible" width="30%">
      <span>{{this.ordersInfo}}</span>
      <p>
        添加备注
        <el-input placeholder="请输入内容" v-model="createOrdersVo.note" clearable></el-input>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="createOrder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import dish from "@/api/dish";
import shoppingCart from "@/api/shoppingcart";
import orders from "@/api/orders";

export default {
  data() {
    return {
      createOrdersVo: {},
      ids: "",
      shoppingCartIds: "",
      ordersInfo: {},
      dialogVisible: false,
      multipleSelection: [], //存储被选中的每一个对象
      selectIds: "", //存储被选中的每一个对象的id
      listLoading: true, //是否显示loading信息
      list: [], //菜品数据列表
      currentPage: 1,
      searchObj: {},
      dish: {},
      dialogDishFormVisible: false,
      saveBtnDisabled: false //保存按钮是否禁用
    };
  },
  created() {
    this.listShoppingCart();
  },
  methods: {
    //生成订单
    createOrder() {
      orders.createOrder(this.ids, this.createOrdersVo).then(response => {
        if (response.success) {
          this.$message({
            type: "success",
            message: "订单生成成功，请到订单页面付款!"
          });
          this.dialogVisible = false;
          shoppingCart.deleteFromShoppingCartById(this.ids)
          window.location.reload();
        } else {
          this.$message({
            type: "error",
            message: "订单生成失败"
          });
        }
      });
    },
    //订单确认
    ordersConfirm() {
      this.ids = "";
      if(this.multipleSelection.length === 0){
          this.$message({
              type: "warning",
              message: "先选择菜品!"
            });
      }
      for (let i = 0; i < this.multipleSelection.length; i++) {
        let selectionElement = this.multipleSelection[i];
        if (i === this.multipleSelection.length - 1) {
          this.selectIds += selectionElement.id;
        } else {
          this.selectIds += selectionElement.id + ",";
        }
      }
      console.log(this.selectIds);
      shoppingCart.queryShoppingCartId(this.selectIds).then(response => {
        this.shoppingCartIds = response.data.ids;
      });
      //延时一段时间后再执行，防止出现ids还没被赋值就传给showOrder()函数导致显示滞后的情况
      setTimeout(() => {
        console.log(this.shoppingCartIds);
        for (let i = 0; i < this.shoppingCartIds.length; i++) {
          if (i === this.shoppingCartIds.length - 1) {
            this.ids += this.shoppingCartIds[i];
          } else {
            this.ids += this.shoppingCartIds[i] + ",";
          }
        }
        console.log(this.ids);
        orders.showOrder(this.ids).then(response => {
          this.ordersInfo = response.data.orderDetail;
        });
        this.dialogVisible = true;
        this.shoppingCartIds = "";
        this.ordersInfo = "";
        this.selectIds = "";
      }, 100); // 延迟0.1秒执行，以毫秒为单位
    },
    //批量删除菜品
    deleteByIds() {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        console.log(this.multipleSelection);
        let selectionElement = this.multipleSelection[i];
        if (i === this.selectIds.length - 1) {
          this.selectIds += selectionElement.id;
        } else {
          this.selectIds += selectionElement.id + ",";
        }
      }
      console.log(this.selectIds);
      this.$confirm("此操作会永久删除数据，是否继续？", "确定删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          shoppingCart.deleteFromShoppingCart(this.selectIds).then(response => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.listShoppingCart();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    listShoppingCart() {
      shoppingCart.queryShoppingCart().then(response => {
        this.list = response.data.shoppingCart;
      });
    },
    addToCart(row) {
      shoppingCart.addToCart(row).then(response => {
        if (response.success) {
          this.listShoppingCart();
        } else {
          this.$message({
            type: "warning",
            message: response.message
          });
        }
      });
    },
    subDishNumber(row) {
      shoppingCart.subFromCart(row).then(response => {
        this.listShoppingCart();
        if (!response.success) {
          this.$message({
            type: "warning",
            message: response.message
          });
        }
      });
    },
    reset() {
      this.searchObj = {};
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getByPage();
    },
    handleCurrentChange(val) {
      (this.page = val), this.getByPage();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>
